<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>01-组件嵌套</title>
    <script type="text/javascript" src="../VueJs/vue.js"></script>
</head>
<body>
    <!-- 
        总结：
            a. 使用 Vue.extend(配置) 创建组件
            b. 在父组件的配置 components 中挂载组件
            c. 在父组件中的 template 中使用组件
            d. 如果大量使用同一个组件作为子组件，可以使用全局方法注册
                Vue.component('组件名称'， 扩展的组件)
     -->
    <div id="demo"></div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false

        // 弟中弟
        const Title = Vue.extend({
            // name: 'cc',
            template: '<h3>这是当前的标题</h3>'
        })

        // ***** 全局注册组件 - 当页面大量使用同一个组件作为子组件
        Vue.component('Hello', Title)

        // 1.0 创建组件 - 子组件
        const School = Vue.extend({
            // 只会影响vue开发工具中组件的名称
            name: 'School',
            // 子类的数据
            data() {
                return {
                    str: '尚硅谷',
                    num: 0
                }
            },
            // components: {
            //     Title,
            // },
            template: `
                <div>
                    <Hello />
                    <p>{{ str }} {{ num }}</p>
                    <button @click="num++">点击更改</button>
                </div>
            `
        })

        const Student = Vue.extend({
            // 只会影响vue开发工具中组件的名称
            name: 'Student',
            // 子类的数据
            data() {
                return {
                    str: 'Student子组件',
                    num: 0
                }
            },
            // components: {
            //     Title,
            // },
            template: `
                <div>
                    <Hello />
                    <p>{{ str }} {{ num }}</p>
                    <button @click="num++">点击更改</button>
                </div>
            `
        })


        new Vue({
            el: '#demo',
            // 2.0 挂载到根组件上
            components: {
                School,
                Student
            },
            // 3.0 在父组件中使用
            template: `
                <div>
                    <School />
                    <hr />
                    <Student />
                </div>
            `
        })
    </script>
</body>
</html>